<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="$tt('label_batch_import')"
    :visible.sync="visible"
    custom-class="dialog_big"
    destroy-on-close
  >
    <div v-loading="loading">
      <el-form :model="form" ref="form" label-position="top">
        <el-form-item>
          <button_select_file @input="uploadFile" type="primary">
            {{ $tt("label_import_excel") }}
            <i class="el-icon-upload2 el-icon--right"></i>
          </button_select_file>
          <el-button @click="downloadImportTemp" size="mini" type="primary">
            {{ $tt("label_download_import_template")
            }}<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </el-form-item>
        <!-- <el-form-item prop="tableList">
          <ex_super_table
            ref="table"
            v-bind="tableBaseOption"
            :data="form.tableList"
            height="600"
          >
          </ex_super_table>
        </el-form-item> -->
      </el-form>
      <!-- <span slot="footer" class="dialog_footer">
        <el-button @click="visible = false">{{ $tt("label_cancel") }}</el-button>
        <el-button type="primary" @click="submit">{{ $tt("label_submit") }}</el-button>
      </span> -->
    </div>
  </el-dialog>
</template>

<script>
// import xlsx from '@/asset/xlsx.full.min.js'
// import { log } from 'shelljs/src/common';
// import ExcelJS from '@/asset/exceljs.bare.min.js'
export default {
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        tableList: [],
      },
      tableBaseOption: {
        model: [
          {
            key: "type",
            label: "目录类型",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.type}
                    onChangeItem={(e) => this.$set(row, column.property, e._label)}
                    type="select"
                    enum="TicketsTypeEnum"
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "fatherName",
            label: "父级目录名称",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.fatherName}
                    onInput={(e) => this.$set(row, column.property, e._label)}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },

          {
            key: "name",
            label: "目录名称",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.name}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "scenario",
            label: "场景解析",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.scenario}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "userDeptName",
            label: "跟进部门名称",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.userDeptName}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "userRoleId",
            label: "跟进角色id",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.userRoleId}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "userRoleName",
            label: "跟进角色名称",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.userRoleName}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "handleTimeValue",
            label: "标准处理时效",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.handleTimeValue}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "handleTimeUnit",
            label: "标准处理时效单位",
            "min-width": 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.handleTimeUnit}
                    onChangeItem={(value) => {
                      this.$set(row, column.property, value);
                    }}
                    type="select"
                    enum="PrescriptionUnitEnum"
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "transferTimeValue",
            label: "流转环节时效",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.transferTimeValue}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "transferTimeUnit",
            label: "流转环节时效单位",
            "min-width": 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.transferTimeUnit}
                    onChangeItem={(value) => {
                      this.$set(row, column.property, value);
                    }}
                    type="select"
                    enum="PrescriptionUnitEnum"
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "roleNameLevel1",
            label: "一级升级角色名称",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.roleNameLevel1}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "roleNameLevel2",
            label: "二级升级角色名称",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.roleNameLevel2}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
          {
            key: "remark",
            label: " 备注",
            "min-width": 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.remark}
                    onInput={(value) => {
                      this.$set(row, column.property, value);
                    }}
                  ></ex_super_input>
                </el-form-item>
              );
            },
          },
        ],
      },
      formRules: {
        type: {
          required: true,
          message: "目录类型不能为空",
          trigger: "change",
        },
        fatherName: {
          required: true,
          message: "上级目录名称不能为空",
          trigger: "blur",
        },
        name: {
          required: true,
          message: "目录名称不能为空",
          trigger: "blur",
        },
        scenario: {
          required: true,
          message: "场景解析不能为空",
          trigger: "blur",
        },
        userDeptName: {
          required: true,
          message: "跟进部门名称不能为空",
          trigger: "blur",
        },
        userRoleId: {
          required: true,
          message: "跟进角色id不能为空",
          trigger: "blur",
        },
        userRoleName: {
          required: true,
          message: "跟进角色名称不能为空",
          trigger: "blur",
        },
        handleTimeValue: {
          required: true,
          message: "标准处理时效不能为空",
          trigger: "blur",
        },
        handleTimeUnit: {
          required: true,
          message: "标准处理时效单位不能为空",
          trigger: "change",
        },
        transferTimeValue: {
          required: true,
          message: "流转环节时效不能为空",
          trigger: "blur",
        },
        transferTimeUnit: {
          required: true,
          message: "流转环节时效单位不能为空",
          trigger: "change",
        },
        roleNameLevel1: {
          required: true,
          message: "一级升级角色名称不能为空",
          trigger: "blur",
        },
        roleNameLevel2: {
          required: true,
          message: "二级升级角色名称不能为空",
          trigger: "blur",
        },
        remark: {
          required: true,
          message: "备注不能为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    show() {
      this.$set(this.form, "tableList", []);
      this.visible = true;
    },
    // 下载模版
    downloadImportTemp() {
      console.log("我", window.location.origin);
      const origin = window.location.origin || "";
      window.open(
        `${origin}/oms-api/tickets/OmsBaseTicketsCatalogRpc/downloadImportTemp.json`
      );
    },
    // 导入
    uploadFile(e) {
      console.log('uploadFile',  e)
      this.$functionCommon({
        url: '/oms-api/tickets/OmsBaseTicketsCatalogRpc/importExcel.json',
        file: e[0],
        commonType: "import",
      })
      // this.$uploadFile({
      //   loading: true,
      //   url: "/oms-api/tickets/OmsBaseTicketsCatalogRpc/importExcel.json",
      //   file: e[0],
      //   success: ({ data }) => {
      //     // this.tipsFn(data);
      //     this.$message.success("导入成功！");
      //     this.$emit("submitSuccess");
      //     this.visible = false;
      //   },
      // });
    },
    submit() {
      // this.$refs.form.validate((valid) => {
      //   if (valid) {
      //     this.$ajax({
      //       url: "/tms-api/base/TmsPlaceInfoRpc/handleBatchImport.json",
      //       method: "post",
      //       type: "json",
      //       loading: this.$t("tip_submiting"),
      //       data: { tmsPlaceInfoList: this.form.tableList },
      //       success: ({ data }) => {
      //         this.tipsFn(data);
      //         // this.$message.success(this.$t("tip_submit_success"))
      //         // this.$emit("submitSuccess")
      //         // this.visible = false
      //       },
      //     });
      //   } else {
      //     this.$message.error(this.$t("form_validate_error"));
      //     return false;
      //   }
      // });
    },
    deleteFn(row, index) {
      this.form.tableList.splice(index, 1);
    },
    tipsFn(data) {
      const msg = this.$t("label_tms_import_tips", [
        data.totalNum,
        data.successNum,
        data.failNum,
      ]);
      this.$message.info(msg);

      this.$set(this.form, "tableList", data.errorTmsPlaceVOList);

      //全部成功时 可以关闭弹窗
      if (data.failNum === 0) {
        this.visible = false;
      }
      //有成功导入 更新页面数据
      if (data.successNum > 0) {
        this.$emit("submitSuccess");
      }
    },
  },
};
</script>
